<template>
  <div id="AccountManagement">
    <el-row>
      <el-col :span="4">
        <div class="div_border_title">
          <h2>用户检索</h2>
        </div>
      </el-col>
    </el-row>
    <div v-if="true" class="search-box">
      <el-form inline>
        <el-form-item label="电话号码">
          <el-input v-model="searchData.tel"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="searchData.id_card"></el-input>
        </el-form-item>
        <el-form-item label="邮件地址">
          <el-input v-model="searchData.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch" icon="search">{{ $t('Search') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="div_title" style="margin-top: 20px;">用户管理</div>
    <el-row>
      <el-col :span="24">
        <el-table :data="userList" border highlight-current-row fit>
          <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
          <el-table-column prop="tel" label="电话号码" width="200" align="center"></el-table-column>
          <el-table-column prop="id" label="身份证号码" align="center"></el-table-column>
          <el-table-column prop="verify_tel" label="电话验证" width="100" align="center"></el-table-column>
          <el-table-column prop="verify_email" label="邮箱验证" width="100" align="center"></el-table-column>
          <el-table-column prop="last_login_time" label="最新登录时间" width="200" align="center"></el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                       :page-size="pageSize" class="table-page-style"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'

  export default {
    name: 'AccountManagement',
    data () {
      return {
        userList: [],
        page_no: 1,
        toolbarList: [],
        authority: 15,
        total: 0,
        pageSize: 0,
        searchData: {
          tel: '',
          id_card: '',
          email: '',
        }
      }
    },
    created () {
      this.freshComponent()
    },
    methods: {
      doSearch () {
        this.getUserList(1)
      },
      freshComponent () {
        this.getUserList(1)
        this.getSubsysList()
      },
      getSubsysList () {
        let _this = this
        let param = new Object()
        postDataToServer('SUBSYS_LISTALL', param).then((data) => {
          _this.subsysData = data.data_list[0]
        }).catch((error) => {
          commonNotify(_this, 1, 'GET')
        })
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      getUserList (pageNum) {
        let _this = this
        let params = new Object()
        params.page_no = this.page_no
        params.page_size = 10
        let s
        for (s in this.searchData) {
          if (this.searchData[s] !== '') {
            params[s] = this.searchData[s]
          }
        }
        postDataToServer('ACCOUT_LIST', params).then((data) => {
          _this.userList = data.data_list
          _this.userList.forEach(function (item) {
            item.verify_tel = getStaticMapList('verify_tel', item.verify_tel)
            item.verify_email = getStaticMapList('verify_email', item.verify_email)
          })
          _this.total = data.total_results
          _this.pageSize = data.page_size
          if (data.status !== 0) {
            commonNotify(_this, 1, 'GET')
          }
        }).catch((error) => {
          commonNotify(_this, 1, 'GET')
        })
      }
    },
    watch: {
      page_no: function (val, oldVal) {
        this.getUserList(val)
      }
    }
  }
</script>
<style scoped>
  #AccountManagement {
    margin: 2em;
  }
</style>
